import { 
  AdditiveBlending,
  AmbientLight,
  Color,
  Geometry,
  PerspectiveCamera, 
  Points, 
  PointsMaterial, 
  Scene, 
  SpotLight, 
  Sprite, 
  SpriteMaterial, 
  Texture, 
  TextureLoader, 
  Vector2, 
  Vector3, 
  WebGLRenderer
} from "three"
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import stats from "../utils/stats"
import dat from 'dat.gui'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(-20, 12, 200)
camera.lookAt(0, 0, 0)

const renderer = new WebGLRenderer({ antialias: true })
renderer.setClearColor(0x000000)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const ambient = new AmbientLight(0x0c0c0c)
scene.add(ambient)

const spotlight = new SpotLight(0xffffff)
spotlight.position.set(100, 100, 100)
scene.add(spotlight)
// scene.add(new SpotLightHelper(spotlight))

// 加载图片
let peppaTexture = new TextureLoader().load('/img/Peppa.png')
let georgeTexture = new TextureLoader().load('/img/George.png')

let points: Points
const controls = {
  animate: true,
  size: 4,
  color: 0xffffff,
  transparents: true,
  opacity: 0.6,

  draw() {
    scene.children.forEach(child => {
      if (child instanceof Sprite) {
        scene.remove(child)
      }
    })
    
    createParticles(this.size, this.transparents, this.opacity, peppaTexture, true, this.color)
    createParticles(this.size, this.transparents, this.opacity, georgeTexture, true, this.color)
  }
}


controls.draw()

const gui = new dat.GUI()
gui.add(controls, 'animate')
gui.add(controls, 'transparents').onChange(e => controls.draw())
gui.add(controls, 'opacity', 0, 1).onChange(e => controls.draw())
gui.addColor(controls, 'color')
gui.add(controls, 'size', 1, 10, 1).onChange(e => controls.draw())

const trackballControls = new TrackballControls(camera, renderer.domElement)

interface Vector3Pro extends Vector3 {
  /** x 轴速度 */
  velocityX ?: number;
  /** y 轴速度 */
  velocityY ? : number;
}

function render() {
  stats.update()
  trackballControls.update()

  // scene.children.forEach(child => {
  //   if (child instanceof Points) {
  //     if (controls.animate) {
  //       (child.geometry as Geometry).vertices.forEach((v: Vector3Pro) => {
  //         v.y = v.y - v.velocityY
  //         v.x = v.x - v.velocityX
    
  //         if (v.y <= 0) v.y = 60
  //         // if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1
  //       })
  //     }
    
  //     // 如果顶点队列中的数据被修改，该值需要被设置为 true
  //     (child.geometry as Geometry).verticesNeedUpdate = true
  //   }
  // })

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}
render()


function createParticles(
  size: number, 
  transparent: boolean, 
  opacity: number, 
  map: Texture, 
  sizeAttenuation, 
  color: Color
) {

  let material = new SpriteMaterial({
    transparent,
    opacity,
    color: new Color(color),
    // 渲染此材质是否对深度缓冲区有任何影响, 默认为true
    // depthWrite: false,
    // 使用图片纹理
    map
  })
  
  material.map.offset = new Vector2(.3, 0)



  let range = 500
  for (let i = 0; i < 1500; i++) {
    let x = Math.random() * range - range / 2
    let y = Math.random() * range - range / 2
    let z = Math.random() * range - range / 2
    
    let sprite = new Sprite(material)
    sprite.scale.set(size, size, size)
    sprite.position.set(x, y, z)
    scene.add(sprite)
  }

}